<template>
  <j-modal
    :visible="visible"
    :title="title"
    :confirmLoading="loading"
    @ok="onOk"
    @cancel="onCancel"
  >
    <div>请选择目标分组</div>
    <div style="border: 1px solid #dcdcdc;margin-top: 8px;">
      <a-tree
        show-icon
        :expanded-keys="expandedKeys"
        :selected-keys="selectedKeys"
        :tree-data="treeData"
        @select="onSelect">

        <a-icon slot="folder" type="folder"/>
      </a-tree>
    </div>
  </j-modal>
</template>

<script>
import { postAction } from '@api/manage'
import LowAppMenuType from '../constant/LowAppMenuType'
import LowAppStoreMixins from '../mixins/LowAppStoreMixins'

export default {
  name: 'LowAppMenuMoveGroupModal',
  mixins: [LowAppStoreMixins],
  data() {
    return {
      title: '移动到...',
      visible: false,
      loading: false,
      expandedKeys: ['root'],
      selectedKeys: [],

      // 关联表单绑定值
      model: {},
      url: {
        moveToGroup: '/online/lowAppMenu/moveToGroup',
      }
    }
  },
  computed: {
    treeData() {
      let children = []
      this.menuList.forEach(menu => {
        if (menu.type === LowAppMenuType.GROUP.type) {
          children.push({
            key: menu.id,
            title: menu.menuName,
            slots: {icon: 'folder'}
          })
        }
      })
      return [{title: '根目录', key: 'root', children}]
    },
  },
  methods: {
    show(record) {
      this.visible = true
      this.model = record
      this.selectedKeys = []
    },

    close() {
      this.visible = false
    },
    onCancel() {
      this.close()
    },
    // 关联modal确定事件，新增or修改数据
    onOk() {
      if (this.selectedKeys.length === 0) {
        this.$message.warning('请选择一个分组')
        return
      }
      this.loading = true
      let groupId = this.selectedKeys[0]
      postAction(this.url.moveToGroup, {
        id: this.model.id,
        appId: this.appId,
        parentId: groupId === 'root' ? '' : groupId
      }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.close()
          this.$emit('ok')
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => this.loading = false)

    },

    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys
    },

  },
}
</script>

<style scoped>

</style>